<template>
  <el-container>
    <el-header class="header">
      <div class="left-panel">
        <!-- <el-form class="search-form" ref="formRefSearch" :inline="true" :model="formSearch">
          <el-form-item prop="MenuTitle">
            <el-input v-model="formSearch.MenuTitle" placeholder="菜单标题" clearable class="!w-[180px]" />
          </el-form-item>
          <el-form-item>
            <el-button type="success" icon="Search" @click="onSearch">搜索</el-button>
            <el-button type="info" icon="RefreshLeft" @click="resetForm(formRefSearch)">重置</el-button>
          </el-form-item>
        </el-form> -->
      </div>
      <div class="right-panel">
        <el-button type="primary" size="default" icon="Plus" @click="addMenu('')">新增菜单</el-button>
        <el-button type="danger" size="default" icon="Delete" @click="deleteMenu">批量删除</el-button>
      </div>
    </el-header>
    <el-main class="main">
      <el-table border :data="menuArr" height="calc(100vh - 220px)" :tree-props="treeProps" row-key="id"
        :default-expand-all="false" @selection-change="handleSelectionChange">
        <el-table-column type="selection" :selectable="selectable" width="55"></el-table-column>
        <el-table-column label="序号" width="80" align="center" type="index"></el-table-column>
        <el-table-column label="菜单标题" prop="menuTitle"> </el-table-column>
        <el-table-column label="菜单类型" prop="menuType" align="center">
          <template #default="scope">
            {{ scope.row.menuType == 1 ? '目录' : (scope.row.menuType == 2 ? '菜单' : '按钮') }}
          </template>
        </el-table-column>
        <el-table-column label="菜单图标" prop="menuIcon" align="center">
          <template #default="scope">
            <el-icon v-if="scope.row.menuIcon">
              <component :is="scope.row.menuIcon"></component>
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column label="路由名称" prop="routeName" align="center">
        </el-table-column>
        <el-table-column label="路由路径" width="250" prop="routePath" align="center">
        </el-table-column>
        <el-table-column label="菜单状态" prop="status" align="center">
          <template #default="scope">
            {{ scope.row.status == 0 ? '启用' : '禁用' }}
          </template>
        </el-table-column>
        <el-table-column label="菜单顺序" prop="menuSort" align="center">
        </el-table-column>
        <el-table-column label="添加时间" width="180" prop="createTime" align="center">
        </el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template #="{ row }">
            <el-button type="warning" size="default" icon="Edit" v-show="row.isSeed !== 0"
              @click="updateMenu(row)">修改</el-button>
            <el-button type="primary" size="default" icon="Plus" v-show="row.isSeed !== 0 && row.menuType !== 3"
              @click="addMenu(row)">新增</el-button>
            <el-popconfirm :title="`您确定要删除${row.menuTitle}?`" width="250px" icon="Delete" @confirm="removeMenu(row.id)">
              <template #reference>
                <el-button type="danger" size="default" icon="Delete" v-show="row.isSeed !== 0">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
  <el-dialog v-model="dialogFormVisible" :title="menuParams.id && !isAdd ? '修改菜单' : '新增菜单'">
    <el-form :model="menuParams" :rules="rules" ref="formRef">
      <el-row>
        <el-col :span="24">
          <el-form-item label="菜单类型" label-width="100px">
            <el-radio-group v-model="menuParams.menuType" size="large" style="margin-top: -5px">
              <el-radio-button label="目录" :value="1" />
              <el-radio-button label="菜单" :value="2" />
              <el-radio-button label="按钮" :value="3" />
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上级菜单" label-width="100px">
            <el-cascader v-model="menuParams.parentId" :options="menuArr" :props="{
              value: 'id',
              label: 'menuTitle',
              emitPath: false,
              checkStrictly: true
            }" clearable filterable placeholder="请选择上级菜单" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="菜单图标" label-width="100px">
            <el-input placeholder="请您输入菜单图标" v-model="menuParams.menuIcon"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单标题" label-width="100px" prop="menuTitle">
            <el-input placeholder="请您输入菜单标题" v-model="menuParams.menuTitle"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单顺序" label-width="100px">
            <el-input-number v-model="menuParams.menuSort" :min="1" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-show="menuParams.menuType !== 3">
          <el-form-item label="路由名称" label-width="100px" prop="routeName">
            <el-input placeholder="请您输入路由名称" v-model="menuParams.routeName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-show="menuParams.menuType !== 3">
          <el-form-item label="路由路径" label-width="100px" prop="routePath">
            <el-input placeholder="请您输入路由路径" v-model="menuParams.routePath"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否启用" label-width="100px">
            <el-radio-group v-model="menuParams.status">
              <el-radio :value="0">启用</el-radio>
              <el-radio :value="1">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="info" size="default" @click="cancel">取消</el-button>
      <el-button type="primary" size="default" @click="confirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import {
  getMenuListApi,
  reqAddOrUpdateMenuApi,
  reqDeleteMenuApi
} from '@/api/modules/menu'
let menuArr = ref([])
const selectable = (row) => row.isSeed !== 0
const treeProps = reactive({
  checkStrictly: false,
})
let dialogFormVisible = ref<boolean>(false)
let formSearch = reactive({
  MenuTitle: ''
})
const loading = ref(false)
const isAdd = ref(false)
let menuParams = reactive({
  id: 0,
  menuTitle: '',
  menuType: 1,
  menuIcon: '',
  menuSort: 1,
  routeName: '',
  routePath: '',
  parentId: 0,
  status: 0
})
let formRefSearch = ref()
let formRef = ref()
let deleteIds = reactive([])
onMounted(() => {
  getMenu()
})
const getMenu = async () => {
  let result = await getMenuListApi(formSearch)
  menuArr.value = result.response
}
const InitParams = () => {
  menuParams = reactive({
    id: 0,
    menuTitle: '',
    menuType: 1,
    menuIcon: '',
    menuSort: 1,
    routeName: '',
    routePath: '',
    parentId: 0,
    status: 0
  })
}
const addMenu = (row) => {
  isAdd.value = true
  if (typeof row == 'string') {
    InitParams()
  } else {
    Object.assign(menuParams, row)
    menuParams.parentId = menuParams.id
  }
  dialogFormVisible.value = true
  nextTick(() => {
    formRef.value.clearValidate('name')
  })
}
const updateMenu = (row: any) => {
  isAdd.value = false
  nextTick(() => {
    formRef.value.clearValidate('name')
  })
  dialogFormVisible.value = true
  Object.assign(menuParams, row)
}
const rules = {
  menuIcon: [{ required: true, message: "菜单图标为必填项", trigger: 'blur' }],
  menuTitle: [{ required: true, message: "菜单标题为必填项", trigger: 'blur' }],
  routeName: [{ required: true, message: "路由名称为必填项", trigger: 'blur' }],
  routePath: [{ required: true, message: "路由路径为必填项", trigger: 'blur' }]
}
const removeMenu = async (id: number) => {
  let result = await reqDeleteMenuApi(id)
  if (result.status == 200) {
    ElMessage({
      type: 'success',
      message: '删除菜单成功'
    })
    getMenu()
  } else {
    ElMessage({
      type: 'error',
      message: '删除菜单失败'
    })
  }
}
const cancel = () => {
  dialogFormVisible.value = false
  InitParams()
  getMenu()
}
const confirm = async () => {
  await formRef.value.validate()
  let result: any = await reqAddOrUpdateMenuApi(menuParams, isAdd.value)
  if (result.status == 200) {
    dialogFormVisible.value = false
    ElMessage({
      type: 'success',
      message: menuParams.id ? '修改菜单成功' : '添加菜单成功'
    })
    getMenu()
  } else {
    ElMessage({
      type: 'error',
      message: menuParams.id ? '修改菜单失败' : '添加菜单失败'
    })
    dialogFormVisible.value = false
  }
}
const onSearch = () => {
  loading.value = true
  getMenu();
  loading.value = false
}
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  onSearch()
}
const handleSelectionChange = (val: []) => {
  deleteIds = val
}
const deleteMenu = () => {
  console.log(deleteIds)
}
</script>
<style lang="scss" scoped></style>
